import { View, Text, StyleSheet,Button } from 'react-native';
import React from 'react';
import Animated, { useSharedValue, useAnimatedStyle, withTiming,withRepeat,Easing } from 'react-native-reanimated';

import * as Animatable from 'react-native-animatable';
// import { styles } from './MyStyle';
import { Loading } from './Loading';
import { BasicCircle } from './SVG01';
import Svg, { Circle } from 'react-native-svg';




// https://github.com/oblador/react-native-animatable

const AnimatedView = Animated.createAnimatedComponent(View);

  export const Test2000 = () => {
    const width1 = useSharedValue(50); // 旋转动画

    const radius = 30;
    const strokeWidth = 4;
    const circunference = 2 * Math.PI * radius;
    const offset = circunference - (80 / 100) * circunference;



// 定义动画样式
const animatedStyle = useAnimatedStyle(() => ({
  width: width1.value,
  height: width1.value,
}));

// 在 useEffect 中启动动画
React.useEffect(() => {
  width1.value = withRepeat(
    withTiming(300, { duration: 1000, easing: Easing.linear }),
    -1,
    true // 来回动画
  );
}, []);

return (
  <View style={styles.container}>
    <Animatable.View
      animation="rotate"
      direction="reverse"
      iterationCount="infinite" // 无限循环
      duration={4500} // 动画持续时间
      easing="linear" // 匀速旋转
      style={styles.animatableView}
    >
      <Svg height="120" width="120">
        <Circle
          cx="60" // 圆心 X 坐标
          cy="60" // 圆心 Y 坐标
          r={radius}
          stroke="gold"
          strokeWidth={strokeWidth}
          fill="none"
          strokeDasharray={circunference}
          strokeDashoffset={offset}
            strokeLinecap="round"
        />
      </Svg>
    </Animatable.View>
  // </View>
);

  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff',
    },
    animatableView: {
      justifyContent: 'center',
      alignItems: 'center',
      height: 120, // 确保视图与 SVG 大小匹配
      width: 120,  // 确保视图与 SVG 大小匹配
    },
  });